<script setup lang="tsx">
import { ref, onMounted } from "vue";

const location = ref({
  lat: 0,
  lng: 0,
});

onMounted(() => {
  navigator.geolocation.getCurrentPosition((position) => {
    location.value = {
      lat: position.coords.latitude,
      lng: position.coords.longitude,
    };
  });
});

const LocationDiv = () => {
  return (
    <div class="bg-purple-100 text-gray-800 p-1 rounded-md mb-1">
      <h3 class="text-purple-500 font-bold">JSX 测试</h3>
      <div class="flex items-center gap-1">
        <span class="text-gray-700">当前位置: </span>
        <span class="text-purple-700 font-bold">
          {location.value.lat}, {location.value.lng}
        </span>
      </div>
    </div>
  );
};
</script>

<template>
  <div>
    <LocationDiv />
  </div>
</template>
